<template>
  <div>
    <div>
      <!-- 表头 -->
      <van-nav-bar
        class="title_bgc"
        title="商品页面"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <van-tabs v-model="active">
      <van-tab
        v-for="item in brotherCategory"
        :key="item.id"
        :title="item.name"
      >
        <article-list :categoryId="goodsId"></article-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import articleList from "./article-list.vue";
import { getGoodsCategory } from "@/api/yangyang/Classify";
export default {
  components: { articleList },
  name: "goods",
  data() {
    return {
      active: 0,
      goodsId: parseInt(this.$route.params.goodsId),
      brotherCategory: [],
    };
  },
  created() {
    this.getGoodsCategory();
  },
  methods: {
    // 获取tabbar导航条
    async getGoodsCategory() {
      // console.log(this.$route.params.goodsId);
      let res = await getGoodsCategory(parseInt(this.$route.params.goodsId));
      this.brotherCategory = res.data.data.brotherCategory;
      console.log(this.brotherCategory);
    },
  },
};
</script>

<style
lang="less" scoped>
.title_bgc {
  background-color: red;
  position: fixed;
  width: 100%;
  color: #fff;
}
/deep/ .van-icon-arrow-left:before {
  color: #fff;
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
</style>
